import React, { useState, useEffect } from 'react';
// 工具类提供的方法
import { useSelector, useDispatch } from 'react-redux'

// 导入actionCreater,生成action对象..得到要提交的action对象
import { increment, decrement, incrementByNum } from './store/modules/counterStore';
import { fetchChannelList } from './store/modules/channelStore';


function App() {
  // 组件中使用hook函数获取redux中的数据,, 获取store中的数据!! 这个是store中的inxex.js中定义的counter[即是reducer]
  // 这个state不是reacet中的state,是redux中的state, 获取的是index.js中定义的reducer中的state的数据
  const { count } = useSelector(state => state.counter)

  // 导入channelStore中的数据, 获取channelList初始变量值
  const { channelList } = useSelector(state => state.channel)

  // 组件中使用hook函数获取dispatch方法
  const dispatch = useDispatch()

  // 组件中使用hook函数获取dispatch方法, 组件挂载后, 发送异步请求, 获取数据, 然后修改channelList的初始值
  useEffect(() => {
    dispatch(fetchChannelList())
  }, [dispatch])

  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      &nbsp; <span>{count}</span> &nbsp;
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementByNum(5))}>+5</button>
      <button onClick={() => dispatch(incrementByNum(10))}>+10</button>
      <ur>
        {
          channelList.map(item => <li key={item.id}>{item.name}</li>)
        }
      </ur>
    </div>
  );
}

export default App;
